<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Calendar</title>
    </h:head>
    <h:body>
        <ui:composition template="./templateuser.xhtml">
            <ui:define name="center">
                
                <h:form>   
                    
                <h:panelGrid columnClasses="value">
                    <p:toolbar>
                        <p:toolbarGroup align="left" style="padding-top: 5px;padding-left: 10px">
                            <p:outputLabel style="font-size: 20pt">Calendar</p:outputLabel>
                        </p:toolbarGroup>
                        <p:toolbarGroup align="right">
                            <p:commandButton value="Create Event" action="createevent?faces-redirect=true" />
                        </p:toolbarGroup>
                    </p:toolbar>   
                    
                    <p:schedule id="schedule" value="#{calendarBean.eventModel}" widgetVar="myschedule" timeZone="GMT+1" draggable="false" resizable="false">

                        <p:ajax event="eventSelect" listener="#{calendarBean.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
                        
                    </p:schedule>
                </h:panelGrid>
 
                <p:dialog widgetVar="eventDialog" header="Event Details" showEffect="clip" hideEffect="clip">
                    <h:panelGrid id="eventDetails" columns="2">
                        <h:outputLabel for="name" value="Name:" />
                        <p:outputLabel id="name" value="#{calendarBean.event.title}" />
                        
                        <h:outputLabel for="date" value="Date:" />
                        <p:outputLabel id="date" value="#{calendarBean.event.startDate}" >
                            <f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT+1"/>
                        </p:outputLabel>

                        <h:outputLabel for="from" value="From:" />
                        <p:outputLabel id="from" value="#{calendarBean.event.startDate}" >
                            <f:convertDateTime pattern="hh:mm" timeZone="GMT+1"/>
                        </p:outputLabel>
                        
                        <h:outputLabel for="to" value="To:" />
                        <p:outputLabel id="to" value="#{calendarBean.event.endDate}" >
                            <f:convertDateTime pattern="hh:mm" timeZone="GMT+1"/>
                        </p:outputLabel>
                        
                        <h:outputLabel for="address" value="Address:" />
                        <p:outputLabel id="address" value="#{calendarBean.event.data.place.address}" >
                        </p:outputLabel>
                        
                        <h:outputLabel for="city" value="City:" />
                        <p:outputLabel id="city" value="#{calendarBean.event.data.place.city.name}" >
                        </p:outputLabel>
                        
                        <h:outputLabel value="Weather:" rendered="#{calendarBean.type.equals('Outdoor')}"/>
                        <p:graphicImage value="#{calendarBean.weatherForecast}" rendered="#{calendarBean.type.equals('Outdoor')}"/>
                        
                        <p:commandButton value="Modify Event" action="#{calendarBean.modifyEvent()}" rendered="#{calendarBean.isCreator() and calendarBean.isFuture()}"/>
                        <p:commandButton value="Delete Event" actionListener="#{calendarBean.delete()}" rendered="#{calendarBean.isCreator() and calendarBean.isFuture()}">
                            <p:confirm header="Confirmation" message="Are you sure?" icon="ui-icon-alert" />
                        </p:commandButton>
                        <p:commandButton value="Event Details" action="#{calendarBean.eventDetails()}" rendered="#{calendarBean.isCreator() or calendarBean.event.data.visibility}"/>
                        
                        <p:confirmDialog global="true" showEffect="fade" hideEffect="explode">
                            <p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"/>
                            <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
                        </p:confirmDialog>
                        
                    </h:panelGrid>
                </p:dialog> 
                
                </h:form> 
 
                <style type="text/css">
                    .value {
                        width: 1000px;
                    }
                </style>
                
            </ui:define>
        </ui:composition>
        
    </h:body>
</html>
